<template>
  <section class="departmentManage">
    <div class="info-title"><span class="icon"></span>视频管理</div>
    <div class="content mainBodyContent">
      <div class="flex_box">
        <div class="home">
          <video
            :id="currentPlayer"
            :style="{
              width: canvasWidth + 'px',
              height: canvasHeight + 'px',
              margin: margin
            }"
            autoplay
            controls
          ></video>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import WebRtcStreamer from '../../../static/video/webrtcstreamer.js'
export default {
  data () {
    return {
      webRtcServer: null,
      currentPlayer: 'video',
      canvasWidth: 900,
      canvasHeight: 500
    }
  },
  mounted () {
    // webrtc-streamer：启动的服务器IP，8000是默认端口号，可在服务端启动时更改
    this.webRtcServer = new WebRtcStreamer(
      this.currentPlayer,
      location.protocol + '//127.0.0.1:8000'
    )
    // 需要看的rtsp视频地址，可以在网上找在线的rtsp视频地址来进行demo实验，在vlc中能播放就能用
    this.webRtcServer.connect(
      'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mp4'
    )
  },
  beforeDestroy () {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  }
}
</script>
